<script setup>
  import { ref, onMounted } from "vue";
  import { getBannerList } from "@/api/system/sys";
  import { getCommendList } from "@/api/movie";
  import { getRandomStarList } from "@/api/star";
  const banners = ref([]); // 声明一个响应式的数组来存储后台返回的轮播图数据
  const commendList = ref([]);
  const randomStarList = ref([]);
  // 在组件挂载后请求数据
  onMounted(async () => {
    try {
      // 调用 sys.js 中的 fetchBanners 函数来请求数据
      const data = await getBannerList();
      banners.value = data["result"]; // 将返回的数据赋值给 banners 数组
    } catch (error) {
      console.error("Failed to fetch banner data:", error);
    }
    try {
      // 调用 sys.js 中的 fetchBanners 函数来请求数据
      const data = await getCommendList();
      commendList.value = data["result"]; // 将返回的数据赋值给 banners 数组
    } catch (error) {
      console.error("Failed to fetch banner data:", error);
    }
    try {
      // 调用 sys.js 中的 fetchBanners 函数来请求数据
      const data = await getRandomStarList();
      randomStarList.value = data["result"]; // 将返回的数据赋值给 banners 数组
    } catch (error) {
      console.error("Failed to fetch banner data:", error);
    }
  });
</script>

<template>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- contents -->
    <div class="main_content">
      <div class="main_content_inner">
        <!-- 广告位 -->
        <div
          class="uk-position-relative uk-visible-toggle uk-light"
          tabindex="-1"
          uk-slideshow="animation: push ;min-height: 200; max-height: 350 ;autoplay: t rue"
        >
          <ul class="uk-slideshow-items rounded">
            <BxjBanner
              v-for="(banner, index) in banners"
              :key="index"
              :mes="banner.remark"
              :img="banner.url"
            />
          </ul>
          <a
            class="uk-position-center-left-out uk-position-small uk-hidden-hover slidenav-prev"
            href="#"
            uk-slideshow-item="previous"
          ></a>
          <a
            class="uk-position-center-right-out uk-position-small uk-hidden-hover slidenav-next"
            href="#"
            uk-slideshow-item="next"
          ></a>
        </div>
        <!-- 推荐视频 -->
        <div
          class="video-grid-slider mt-4"
          uk-slider="finite: true"
        >
          <div class="grid-slider-header">
            <div>
              <h3>推荐视频</h3>
              <p>你可能喜欢</p>
            </div>
            <div class="grid-slider-header-link">
              <div class="btn-arrow-slider">
                <a
                  href="#"
                  class="btn-arrow-slides"
                  uk-slider-item="previous"
                >
                  <span class="arrow-left"></span>
                </a>
                <a
                  href="#"
                  class="btn-arrow-slides"
                  uk-slider-item="next"
                >
                  <span class="arrow-right"></span>
                </a>
              </div>
            </div>
          </div>

          <ul
            class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid"
          >
            <BxjMovieBase
              v-for="(movieBase, index) in commendList"
              :key="index"
              :name="movieBase.name"
              :img="movieBase.img"
              :avator="movieBase.avator"
              :uploader="movieBase.uploader"
              :upTime="movieBase.upTime"
            />
          </ul>
        </div>

        <!-- 短视频 -->

        <div class="section-header mt-5">
          <div class="section-header-left">
            <h3>短视频</h3>
            <p>可爱视角</p>
          </div>
          <div class="section-header-right">
            <router-link
              :active-class="activeClass"
              to="/trivia?type=shortMovie"
            >
              <a class="see-all"> 获取更多</a>
            </router-link>
          </div>
        </div>

        <!-- Videos -->

        <div class="section-small pt-0">
          <div uk-slider="finite: true">
            <ul
              class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid mb-3"
            >
              <BxjMovieBase
                v-for="(movieBase, index) in commendList"
                :key="index"
                :name="movieBase.name"
                :img="movieBase.img"
                :avator="movieBase.avator"
                :uploader="movieBase.uploader"
                :upTime="movieBase.upTime"
              />
            </ul>

            <a
              class="uk-position-center-left-out uk-position-small slidenav-prev"
              href="#"
              uk-slider-item="previous"
            ></a>
            <a
              class="uk-position-center-right-out uk-position-small slidenav-next"
              href="#"
              uk-slider-item="next"
            ></a>
          </div>
        </div>

        <hr class="m-0" />

        <!-- UP主 -->

        <div class="section-small">
          <div uk-slider="finite: true">
            <div class="grid-slider-header">
              <div>
                <h3>质量UP</h3>
              </div>
              <div class="grid-slider-header-link">
                <router-link
                  :active-class="activeClass"
                  to="/trivia?type=up"
                >
                  <a
                    href="browse-channals.html"
                    class="button transparent uk-visible@m"
                  >
                    获得更多
                  </a>
                </router-link>

                <a
                  href="#"
                  class="slide-nav-prev"
                  uk-slider-item="previous"
                ></a>
                <a
                  href="#"
                  class="slide-nav-next"
                  uk-slider-item="next"
                ></a>
              </div>
            </div>

            <ul
              class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid mb-3"
              uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
            >
              <BxjCard
                v-for="(star, index) in randomStarList"
                :key="index"
                :name="star.name"
                :num="star.num"
                :liked="star.liked"
                :view="star.view"
                :avatar="star.avatar"
              />
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style></style>
